<!DOCTYPE html>
<html lang="Zh-cn">
<head>
	<meta charset="UTF-8">
	<meta  name="viewport" content="width:device-width,initial-scale=1">
	<title>注册</title>
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="icon" href="favicon.ico" >
	<style type="text/css">
		.yonghumingtishi,.mimatishi,.zaicishurumimatishi,.youxiangtishi{
			display:none;
		}
	</style>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
				<a  class="navbar-brand" href="index.html">
				liuboy
				</a>
			</div>
			<div id="a" class="collapse navbar-collapse">
			<ul class="nav navbar-nav" >
			<li><a href="wenzhang.html">文章</a></li>
			<li><a href="fenxiang.html">分享</a></li>
			<li><a href="liuyan.html">留言</a></li>
			</ul>
			<!-- <a href="login.html" class="navbar-right navbar-link navbar-text">登陆/注册</a> -->
		</div>
		</div>
	</nav>
	<form action="zhuce.php" method="post" id="zc">
	<div class="container-fluid">
	<div class="input-group">
		<div class="input-group-addon">用户名：</div>
		<input type="text" class="form-control yonghuming" name="username">
	</div>
	<div class="yonghumingtishi">
		<p>请输入用户名</p>
	</div>
	<div class="input-group">
	<label class="radio-inline ">
		<input type="radio" name="sex" value="1" checked>男	
	</label>
	<label class="radio-inline">
	<input type="radio" name="sex" value="0">女
	</label>
	</div>
	<div class="input-group">
		<div class="input-group-addon">密&nbsp;&nbsp;&nbsp;&nbsp;码：</div>
		<input type="password" class="form-control mima" name="password">
	</div>
	<div class="mimatishi">
		<p>请输入6到12位数字字母组合密码</p>
	</div>
	<div class="input-group">
		<div class="input-group-addon">再次输入密码：</div>
		<input type="password" class="form-control zaicishurumima">
	</div>
	<div class="zaicishurumimatishi">
		<p>请再次输入密码</p>
	</div>
	<div class="input-group">
		<div class="input-group-addon">邮箱：</div>
		<input type="text" class="form-control youxiang" name="email">
	</div>
	<div class="youxiangtishi">
		<p>请输入邮箱</p>
	</div>
	<div class="input-group">
		<div class="input-group-addon">
			验证码：
		</div>
		<input type="text" name="yanzhengma" class="form-control" placeholder="区分大小写">
		
	</div>
	<div>
		<img src="">
			<a href="#">看不清楚，换一张</a>
		</div>
		<input type="button" name="zc" value="注册" class="btn btn-default " onclick="check()">
	</form>
	</div>

</body>
<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
	var a = false
	var b = false
	var c = false
	var d = false
	var e = false
	// <!-- 用户名验证 -->
	$(".yonghuming").focus(function(){
		$(".yonghumingtishi").css("display","block");
	});
	$(".yonghuming").blur(function(){
		console.log($(".yonghuming").val());
		if($(".yonghuming").val()==""){
			$(".yonghumingtishi").html("用户名不能为空").css("color","red");
		}else{
			// ajax请求服务器查询用户名是否重复
			// if(ajaxdata=="用户名已存在"){
			// $(".yonghumingtishi").html("用户名已存在").css("color","red");	
			// }else{
			$(".yonghumingtishi").html("用户名输入正确").css("color","green");
			a = true
			// }
		}
		

		
	});
	// <!-- 密码验证 -->
	$(".mima").focus(function(){
		$(".mimatishi").css("display","block");
	});
	var e = /^\w{6,12}$/;
	$(".mima").blur(function(){
		if($(".mima").val()==""){
		$(".mimatishi").html("密码不能为空").css("color","red");

		}else if(!e.test($('.mima').val())){
		$(".mimatishi").html("密码不是6到12位").css("color","red");
		}else{
			$(".mimatishi").html("密码输入正确").css("color","green");
			b = true
		}

	});
		
	// <!-- 再次输入密码验证 -->
	$(".zaicishurumima").focus(function(){

		$(".zaicishurumimatishi").css("display","block");
	});
	$(".zaicishurumima").blur(function(){
		if($(".zaicishurumima").val()==""){
		$(".zaicishurumimatishi").html("密码不能为空").css("color","red");

		}else if($(".zaicishurumima").val()==$(".mima").val()){
		
		$(".zaicishurumimatishi").html("密码输入正确").css("color","green");
			c = true
		}else{
		$(".zaicishurumimatishi").html("两次输入密码不一致").css("color","red");
		}
	});
	// <!-- 邮箱验证 -->
	$(".youxiang").focus(function(){
		$(".youxiangtishi").css("display","block");
	});
	var email = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	$(".youxiang").blur(function(){
		if(!email.test($('.youxiang').val())){
		$(".youxiangtishi").html("邮箱格式不正确").css("color","red");

		}else{
		$(".youxiangtishi").html("邮箱输入正确").css("color","green");
		d = true
	}
	});
	// 获取验证码
	$.get("yanzhengma.php",function(data){
  		 // var yzm = encodeURI(data);
  		 console.log(data);
  		 var tpdz = "data:image/jpeg;base64,"+data;
  		 $("img").attr("src",tpdz);
  	});
  	// 刷新验证码
  	$("a").click(function(){
  		$.get("yanzhengma.php",function(data){
  		 // var yzm = encodeURI(data);
  		 console.log(data);
  		 var tpdz = "data:image/jpeg;base64,"+data;
  		 $("img").attr("src",tpdz);
  	});
  	});
  	function check(){
  		if(a&&b&&c&&d&&e){
  			$("#zc").submit();	
  		}else{
  			return false;
  	};

  	}
  		
  	
  
</script>
</html>